<template>
  <div class="input-wrap">
    <div class="search"
         border-radius>
      <div class="iconfont icon">&#xe62b;</div>
      <input type="text"
             placeholder="搜索商家"
             class="input-content"
             @keydown="handleKeyEntry"
             v-model="inputValue">
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'SearchList',
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleKeyEntry (e) {
      if (e.keyCode === 13 && this.inputValue !== '') {
        this.$router.push({
          path: `/result`,
          query: {
            name: this.inputValue,
            sort: 'sort'
          }
        })
        this.searchHistory(this.inputValue)
      }
    },
    getSearch (value) {
      let locationData = JSON.parse(this.$localStorage.get('locationData'))
      if (locationData != null) {
        locationData = Object.assign({}, locationData, { cate_id: 0, shop_name: value, order: 'sort' })
        this.$api.search.getSearchResult({ ...locationData })
          .then(this.getSearchSucc)
          .catch((e) => {
            console.log(e)
          })
      }
      const searchParams = { name: value, sort: 'sort', id: 0 }
      this.changeSearchParams(searchParams)
      this.$api.search.getSearchResult({ ...locationData })
        .then(this.getSearchSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    getSearchSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        const data = res.data
        this.changeSearchResult(data)
      }
    },
    ...mapMutations({
      changeSearchResult: 'changeSearchResult',
      changeSearchParams: 'changeSearchParams'
    }),
    searchHistory (value) {
      let searchHis = JSON.parse(this.$localStorage.get('searchHis'))
      if (searchHis != null) {
        searchHis.push(value)
        searchHis = [...new Set(searchHis)]
        this.$localStorage.set('searchHis', JSON.stringify(searchHis))
      } else {
        let search = []
        search.push(value)
        search = [...new Set(search)]
        this.$localStorage.set('searchHis', JSON.stringify(search))
      }
    }
  },
  watch: {
    inputValue (value) {
      this.getSearch(value)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.input-wrap
  padding-left 40px
  padding-right 40px
  padding-top 20px
  padding-bottom 20px
  box-sizing border-box
  margin-bottom 20px

  .search
    height 70px
    width 100%
    display flex
    align-items center
    padding-left 40px
    box-sizing border-box

    .icon
      line-height 73px
      font-size $fzFifth
      color $graySecond

    .input-content
      font-size $smallFz
      height 66px
      line-height 66px
      width 90%
      border-radius 66px
      padding-left 20px
      box-sizing border-box
      border none
      position relative
      z-index 2

  [border-radius]::before
    border-radius 70px
    border-color #DCDCDC
</style>
